import React, { PureComponent } from 'react'
import { Card, Tabs } from 'antd'
import { StarOutlined, BookOutlined, DesktopOutlined } from '@ant-design/icons';
import { history } from 'umi';
import Courseware from './Courseware';
import Material from './Material';
import Collect from './Collect';
import { getStudentSubject } from '@/services/studentPractice'
export default class MainBottom extends PureComponent<any, any> {
    constructor(props: any) {
        super(props)
        this.state = {
            currentTab: this.props.params.tab,
            treeData: []
        }
    }
    componentDidMount() {
        const { params } = this.props;
        const uid = localStorage.getItem('id');
        getStudentSubject({uid}).then(res => {
            if (!res) return;
            const treeData = res.subjects?JSON.parse(JSON.stringify(res.subjects).replace(/id/g, 'key')):[]
            this.setState({
                treeData
            })
        })
        this.setState({
            currentTab: params.tab,
        })
    }

    changeTabs = (e: string) => {
        this.setState({
            currentTab: e
        })
        const { subject } = this.props.params;
        if(subject){
            history.push('/dashboard?tab=' + e+'&subject='+subject)
        }else{
            history.push('/dashboard?tab=' + e)
        }
    }
    render() {
        const { currentTab, treeData } = this.state;
        const isDashboard = window.location.hash !== '#/train';
        const renderComponent = (tab) => {
            if (tab === '1' || !tab) {
                return <Courseware params={this.props.params} treeData={treeData} isDashboard={isDashboard} />
            }
            if (tab === '2') {
                return <Material params={this.props.params} treeData={treeData} isDashboard={isDashboard} />
            }
            if (tab === '3') {
                return <Collect isDashboard={isDashboard} />
            }
        }
        return (
            <Card style={{ marginTop: 25 }}>
                <Tabs onChange={this.changeTabs} activeKey={currentTab}>
                    <Tabs.TabPane key="1" tab={<span><BookOutlined />查看电子课件</span>}></Tabs.TabPane>
                    <Tabs.TabPane key="2" tab={<span><DesktopOutlined />查看视频课件</span>}></Tabs.TabPane>
                    <Tabs.TabPane key="3" tab={<span><StarOutlined />我的收藏资料</span>}></Tabs.TabPane>
                </Tabs>
                {renderComponent(currentTab)}
            </Card>
        )
    }
}
